<template>
  <div class="body">
    <div class="header --flex-row-ai!c">
      <ul style="width: 100%">
        <!-- 跳转导航列表, prop为 navLi, 传数组 -->
        <li
          v-for="li in navLi"
          :key="li.path"
          @click="handleNavSelect(li.path)"
          class="router-li"
        >
          <a :class="current == li.path ? 'current' : ''">{{ li.name }}</a>
        </li>

        <!-- 用户登录, prop为login, 事件为user(id) -->
        <div class="touxiang" v-show="login.show">
          <el-dropdown @command="handleLogin">
            <span class="el-dropdown-link">
              <a route-path=""
                ><el-avatar :src="login.img" class="loginImg"></el-avatar
              ></a>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="li.id"
                v-for="li in login.describe"
                :key="li.id"
              >
                {{ li.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </ul>
    </div>
  </div>
</template>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script>
export default {
  props: {
    login: {
      type: Object,
      default: function () {
        return {
          show: true,
          describe: [
            { id: "1", name: "登录" },
            { id: "2", name: "退出" },
          ],
          img: "headImg2.png",
        };
      },
    },
  },
  data() {
    return {
      current: 1,
      navLi: [
        { name: "推荐职位", path: "/recommend" },
        { name: "职位分类", path: "/category" },
        { name: "网站留言", path: "/message" },
        { name: "友情链接", path: "/friendWeb" },
        { name: "我的职位", path: "/myArticle" },

        // { name: "测试页面", path: "/test" },
      ],
      login: {
        show: true,
        describe: [
          { id: "1", name: "登录" },
          { id: "2", name: "退出" },
        ],
        img: "headImg2.png",
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  computed: {},
  methods: {
    init() {
      console.clear();

      var colors = [
        "#ED5565",
        "#FC6E51",
        "#FFCE54",
        "#2ECC71",
        "#4FC1E9",
        "#8067B7",
        "#A0D468",
        "#48CFAD",
        "#5D9CEC",
        "#AC92EC",
        "#EC87C0",
      ];
      var previous = 0;

      $(document)
        .mousemove(function (e) {
          var x = e.pageX - 50,
            y = e.pageY - 50,
            a = Math.PI - Math.atan2(x, y),
            p = Math.sqrt(x * x + y * y),
            m = Math.sqrt(
              ($(window).width() - 50) * ($(window).width() - 50) +
                ($(window).height() - 50) * ($(window).height() - 50)
            );
          $(".stem").css("transform", `translate(-50%,-50%) rotate(${a}rad)`);
          $(".stem").css("height", `${(p * 35) / m}px`);
          $(".pupil")
            .css("height", `${12.5 - (p * 3) / m}px`)
            .css("width", `${12.5 - (p * 3) / m}px`);
        })
        .mouseleave(function (e) {
          $(".stem").css("height", `0px`);
          $(".pupil").css("height", `12.5px`).css("width", `12.5px`);
        });

      $(".ball").click(function () {
        var r = random(0, colors.length - 1);
        while (r == previous) {
          r = random(0, colors.length - 1);
        }
        previous = r;
        var c = colors[r];
        $(".eye")
          .append(`<div class="skin" style="background-color:${c};"></div>`)
          .css("background-color", c);
      });

      function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
    },
    // 切换导航按钮
    handleNavSelect(keyPath) {
      this.current = keyPath;
      // 通过编程式导航, 跳转到 /admin/user/add 路由
      // 写法1: /admin/user/add  /开头为绝对
      // 写法2: user/add   无/为相对
      // 导航到/add组件
      // console.log(this.$route) // 保存当前的URL
      if (this.$route.path != keyPath) {
        this.$router.push(keyPath);
      }
    },
    // 登录下拉框的点击事件
    handleLogin(command) {
      this.$emit("user", command);
    },
  },
};
</script>


<style scoped>
.body {
  background-color: #323133;
  margin: 0;
  font-family: "Average Sans", sans-serif;
  grid-template-rows: 0;
  z-index: 99;
}
.body .header {
  position: absolute;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0px;
  left: 0px;
  right: 0px;
  display: flex;
}

.body .header a {
  color: #fff;
  text-decoration: none;
  padding: 20px;
  font-size: 20px;
}
.router-li {
  float: left;
  margin: 30px;
  cursor: pointer;
}

.touxiang {
  text-align: right;
  margin-top: 20px;
}
.el-avatar {
  width: 50px;
  height: 50px;
}
</style>
</style>
